<template>
  <!-- 表单 -->
  <div class="app-container">
    <h2>{{ operationType }}</h2>
    <el-form :model="teacher" :rules="rules" ref="teacher" label-width="100px" class="demo-ruleForm">
      <el-form-item label="讲师姓名" prop="name">
        <el-input v-model="teacher.name"></el-input>
      </el-form-item>
      <el-form-item label="讲师头街"  prop="level">
        <el-select v-model="teacher.level" placeholder="请选择">
          <el-option :label="'高级讲师'" :value="1"></el-option>
          <el-option :label="'首席讲师'" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="讲师资历" prop="intro">
        <el-input type="text" v-model="teacher.intro"></el-input>
      </el-form-item>
      <el-form-item label="讲师简介" prop="career">
        <el-input type="textarea" v-model="teacher.career"></el-input>
      </el-form-item>
      <el-form-item label="讲师头像">
        <!--缩略图-->
        <pan-thumb :image="teacher.avatar"/>
        <!--上传图像按钮-->
        <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像</el-button>
        <!--v-show：是否显示上传组件
            :key：类似于id，如果一个页面多个图片上传控件，可以做区分
            :url：后台上传的url地址
            @close：关闭上传组件
            @crop-upload-success：上传成功后的回调 -->
        <image-cropper
          v-show="imagecropperShow"
          :width="300"
          :height="300"
          :key="imagecropperKey"
          :url="OSS_API+'/oss/uploadImg?dir=teacherImg'"
          field="file"
          @close="close"
          @crop-upload-success="cropSuccess"/>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input type="number" v-model="teacher.sort"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save('teacher')">保存</el-button>
        <el-button @click="clear('teacher')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {createTeacher, findByIdTeacher, updateTeacher} from '../../api/teacher/teacher'
import ImageCropper from '@/components/ImageCropper/index'
import PanThumb from '@/components/PanThumb/index'

// 重置讲师
const nullTeacher = {
  id: '',
  name: '',
  intro: '',
  career: '',
  level: null,
  // 头像
  avatar: '',
  sort: 0
}

export default {
  data() {
    return {
      // 获取配置文件dev中的配置信息
      OSS_API: 'http://localhost:7000',
      // 上传头像的弹框
      imagecropperShow: false,
      // 头像图片的标识，类似于id，如果一个页面多个图片上传控件，可以做区分
      imagecropperKey: 0,
      operationType: '',
      nullTeacher: nullTeacher,
      // 修改传过来的id
      id: null,
      // 讲师对象
      teacher: {
        id: '',
        name: '',
        intro: '',
        career: '',
        level: null,
        sort: 0,
        // 头像
        avatar: ''
      },
      // 规则
      rules: {
        name: [
          {required: true, message: '请输入讲师名称', trigger: 'blur'},
          {min: 2, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
        ],
        level: [
          {required: true, message: '请选择讲师头街', trigger: 'blur'}
        ],
        intro: [
          {required: true, message: '请输入讲师资历', trigger: 'blur'}
        ],
        career: [
          {required: true, message: '请输入讲师简介', trigger: 'blur'}
        ],
        sort: [
          {required: true, message: '请输入排序', trigger: 'blur'}
        ]
      }
    }
  },
  components: {ImageCropper, PanThumb},
  methods: {
    // 讲师头像上传成功后的回调
    cropSuccess(data) {
      console.log(data)
      this.teacher.avatar = data
    },
    // 讲师头像弹窗关闭的回调
    close() {
      this.imagecropperShow = false
    },
    // 修改或创建
    async save(formName) {
      // 表单验证
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.id) {
            // 修改
            let r = await updateTeacher(this.teacher)
            if (r.code === 20000) {
              this.$message.success("修改讲师成功！")
            } else {
              this.$message.success("修改讲师失败！")
            }
          } else {
            // 创建
            let r = await createTeacher(this.teacher)
            if (r.code === 20000) {
              this.$message.success("创建讲师成功！")
            } else {
              this.$message.error("创建讲师失败！")
            }
          }
          // 跳转路由
          this.$router.push({path: '/teacher/list'})
        }
      })
    },
    // 清空
    clear(formName) {
      this.$refs[formName].resetFields()
    }
  },
  created() {
    // 获取修改的id，回显
    if (!this.$route.params.id) {
      this.operationType = '创建讲师'
      this.teacher = {...nullTeacher}
      return false
    }
    // 更改标题
    this.operationType = '修改讲师'
    this.id = this.$route.params.id
    findByIdTeacher(this.id)
      .then(result => {
        this.teacher = result.data
      })
    
  },
  // 监听器
  watch: {
    $route(to, path) {
      // uri没有id，就是添加讲师，默认重置表单
      this.teacher = {...nullTeacher}
    }
  }
}
</script>

<style>

</style>
